<template>
  <!-- <HeaderBar /> -->
  <div class="full">
    <div class="container">
      <!-- 头部个人信息 -->
      <div class="header" :style="`background-image: url(${userInfo.top_photo})`">
        <div class="gradient"></div>
        <div class="headerUser">
          <div class="userInfo">
            <div class="userInfoImage">
              <img :src="userInfo.face" alt="" id="userImage" />
              <a target="_blank" href="#" class="userImage-cover" v-if="isMypage">更换头像</a>
            </div>
            <div class="userBasic">
              <div class="userBasic-top">
                <span class="userName">{{ userInfo.name }}</span>
                <span class="level">LV{{ userInfo.level }}</span>
                <!-- <div class="vipType disable">大会员</div> -->
                <!-- <div class="fans">
                  <div class="fans-left"> + </div>
                  <div class="fans-right">
                    <p>{{ userInfo.nameplate?.name }}</p>
                  </div>
                </div> -->
              </div>
              <div class="basicSpacing">
                <h4 :title="userInfo.sign" class="spacing-text" v-if="!isMypage">
                  {{ userInfo.sign }}
                </h4>
                <input
                  type="text"
                  class="spacingInput"
                  id="spacing-text"
                  :placeholder="userInfo.sign"
                  maxlength="60"
                  v-if="isMypage"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 导航栏 -->
      <div class="navgator">
        <div class="wrapper">
          <div class="navLeft">
            <routerLink
              :to="{ name: 'Homepage', query: { hostMid } }"
              class="tab"
              :class="$route.path.includes('homepage') && 'active'"
            >
              <span class="iconfont icon-zhuye home"></span>
              <span class="tabText">主页</span>
            </routerLink>
            <routerLink
              :to="{ name: 'Dynamic', query: { hostMid } }"
              class="tab"
              :class="$route.path.includes('dynamic') && 'active'"
            >
              <span class="iconfont icon-dongtaixuanzhong dynamic"></span>
              <span class="tabText">动态</span>
            </routerLink>
            <routerLink
              :to="{ name: 'Contribution', query: { hostMid } }"
              class="tab"
              :class="$route.path.includes('contribution') && 'active'"
            >
              <span class="iconfont icon-jiajudianshi- contribute"></span>
              <span class="tabText">投稿</span>
            </routerLink>
            <routerLink
              :to="{ name: 'VideoList', query: { hostMid } }"
              class="tab"
              :class="$route.path.includes('videolist') && 'active'"
            >
              <span class="iconfont icon-bxs-videos video"></span>
              <span class="tabText">频道</span>
            </routerLink>
            <routerLink
              :to="{ name: 'Collection', query: { hostMid } }"
              class="tab"
              :class="$route.path.includes('collection') && 'active'"
            >
              <span class="iconfont icon-shoucang contribute"></span>
              <span class="tabText">收藏</span>
            </routerLink>
            <a href="#" class="tab">
              <span class="iconfont icon-xihuan subscribe"></span>
              <span class="tabText">订阅</span>
            </a>
            <a href="#" class="tab">
              <span class="iconfont icon-setting setting"></span>
              <span class="tabText">设置</span>
            </a>
          </div>
          <div class="navSearch">
            <input type="text" class="spaceInput" placeholder="搜索视频，动态" />
            <span class="iconfont icon-sousuo"></span>
          </div>
          <div class="navRight">
            <a href="#" class="navData">
              <p class="data-text">关注数</p>
              <p v-if="userCard.card" class="attention">{{ localNum(userCard.card.friend, 1) }}</p>
            </a>
            <a href="#" class="navFans">
              <p class="data-text">粉丝数</p>
              <p v-if="userCard.card" class="fansNum">{{ localNum(userCard.card.fans, 1) }}</p>
            </a>
            <div class="navPraise">
              <p class="data-text">获赞数</p>
              <p v-if="upStatus.likes" class="data-bf">{{ localNum(upStatus.likes!, 1) }}</p>
            </div>
            <div class="navPraise">
              <p class="data-text">播放数</p>
              <p v-if="upStatus.archive" class="data-bf">{{
                localNum(upStatus.archive.view, 1)
              }}</p>
            </div>
            <div class="navPraise">
              <p class="data-text">阅读数</p>
              <p class="data-bf">{{ upStatus.article?.view }}</p>
            </div>
          </div>
        </div>
        <div class="navCursor" style="width: 50px; left: 20px" active></div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  import {
    reqUserInfo,
    UserInfo,
    reqUserCard,
    InfoCard,
    reqUpStatus,
    Upstatus,
  } from '@/api/personal'
  export default defineComponent({
    name: 'Personal',
  })
</script>

<script lang="ts" setup>
  import { formatImgUrl, localNum } from '@/utils/lib'
  import { usePersonalDataStore } from '@/store/moudles/personalData'
  import { useUserStore } from '@/store/moudles/user'

  const route = useRoute()

  const hostMid = Number(route.query.hostMid)

  const UserStore = useUserStore()

  const isMypage = UserStore.mid === hostMid

  //小菠萝修改数据
  const UsePersonalDataStore = usePersonalDataStore()

  // 请求渲染
  const userInfo = ref<Partial<UserInfo>>({})
  const userCard = ref<Partial<InfoCard>>({})
  const upStatus = ref<Partial<Upstatus>>({})

  async function getUserInfo(mid: number) {
    //请求主页头部信息
    const res = await reqUserInfo(mid)
    //调用pina的action修改数据
    UsePersonalDataStore.changePersonal(res.mid, res.birthday)

    res.top_photo = formatImgUrl(res.top_photo)

    userInfo.value = res
  }
  //请求关注数和粉丝数
  async function getUserCard(mid: number) {
    userCard.value = await reqUserCard(mid)
  }
  //获赞数，播放数，阅读数
  async function getUpStatus(mid: number) {
    upStatus.value = await reqUpStatus(mid)
  }
  onMounted(async () => {
    getUserInfo(hostMid)
    getUserCard(hostMid)
    getUpStatus(hostMid)
  })

  watch(
    () => route.query,
    (query) => {
      if (!route.fullPath.includes('personal')) return
      if (Number(query.hostMid) !== hostMid) location.reload()
    },
  )
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2976401_b5pk3s6y1ta.css');
</style>

<style lang="less" scoped>
  .full {
    min-width: 1200px;
    margin: 0 auto;
    background-color: #f4f5f7;
    margin-top: 56px;
    & a:hover {
      color: #23c9ed;
    }
    .container {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      // 头部样式开始
      .header {
        width: 100%;
        height: 200px;
        background-position: 50%;
        background-size: cover;
        position: relative;
        .gradient {
          width: 100%;
          height: 84px;
          background-image: url('./image/touming.png');
          background-position: 50%;
          position: absolute;
          left: 0;
          bottom: 0;
          background-repeat: repeat-x;
        }
        .headerUser {
          height: 84px;
          position: absolute;
          bottom: 0;

          .userInfo {
            margin: 0 0 0 20px;
            padding-bottom: 16px;
            display: flex;
            .userInfoImage {
              position: relative;
              width: 64px;
              height: 64px;
              border: 2px solid hsla(0, 0%, 100%, 0.4);
              border-radius: 52px;
              #userImage {
                width: 64px;
                height: 64px;
                border-radius: 50%;
              }
              .userImage-cover {
                // display: none;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(0, 0, 0, 0.6);
                color: #fff;
                font-size: 12px;
                line-height: 64px;
                text-align: center;
                opacity: 0;
                &:hover {
                  opacity: 1;
                  transition-property: opacity;
                  transition-duration: 0.5s;
                  transition-timing-function: ease;
                  transition-delay: 0;
                }
              }
            }
            .userBasic {
              margin-left: 20px;
              .userBasic-top {
                display: flex;
                align-items: center;

                .userName {
                  display: inline-block;
                  margin-right: 5px;
                  font-size: 18px;
                  font-weight: 500;
                  color: #fff;
                  line-height: 18px;
                  vertical-align: middle;
                }
                .level {
                  width: 28px;
                  height: 16px;
                  background-color: #ff6c00;
                  color: #fff;
                  margin-right: 5px;
                  padding: 1px 3px;
                  font-size: 12px;
                  text-align: center;
                  line-height: 16px;
                  vertical-align: middle;
                  transform: scale(0.8);
                  border-radius: 4px;
                }
                .vipType.disable {
                  color: #99a2aa;
                  background-color: #ccd0d7;
                }
                .vipType {
                  width: 36px;
                  height: 16px;
                  line-height: 16px;
                  vertical-align: middle;
                  border-radius: 4px;
                  font-size: 12px;
                  padding: 0 5px;
                  margin-right: 5px;
                }
                .fans {
                  display: flex;
                  .fans-left {
                    width: 14px;
                    height: 14px;
                    border: 1px dashed #99a2aa;
                    font-size: 15px;
                    line-height: 15px;
                    text-align: center;
                    vertical-align: middle;
                    background-color: #e5e9ef;
                  }
                  .fans-right {
                    width: 48px;
                    height: 16px;
                    background-color: #000;
                    opacity: 0.7;
                    border-radius: 1px;
                    position: relative;
                    & {
                      color: #fff;
                      font-size: 10px;
                      line-height: 16px;
                      vertical-align: middle;
                    }
                  }
                }
                .level,
                .vipType,
                .fans:hover {
                  cursor: pointer;
                }
              }

              .basicSpacing {
                margin-top: 6px;
                width: 735px;

                .spacing-text,
                .spacingInput {
                  width: 730px;
                  height: 26px;
                  font-size: 12px;
                  background: transparent;
                  border-radius: 4px;
                  color: hsla(0, 0%, 100%, 0.8);
                  line-height: 26px;
                  margin-left: -5px;
                  padding: 0 5px;
                  position: relative;
                  border: none;
                  box-shadow: none;
                  font-weight: 400;
                }
                .spacingInput {
                  outline: none;
                  vertical-align: top;
                  transition-property: all;
                  transition-duration: 0.3s;
                  transition-timing-function: ease;
                  transition-delay: 0s;

                  &::placeholder {
                    color: #fff;
                  }

                  &:hover {
                    background: hsla(0, 0%, 100%, 0.2);
                    box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
                    &::placeholder {
                      color: #ccc;
                    }
                  }
                  &:focus {
                    background: #fff;
                    box-shadow: inset 0 2px 4px rgb(35 54 86 / 30%);
                    color: #6d757a;
                    &::placeholder {
                      color: #ccc;
                    }
                  }
                }
              }
            }
          }
        }
      }
      //头部样式结束

      //导航栏样式开始
      .navgator {
        height: 66px;
        background-color: #fff;
        margin-bottom: 10px;
        .wrapper {
          padding: 0 20px;
          position: relative;
          display: flex;
          align-items: center;
          //左边开始
          .navLeft {
            height: 66px;
            display: inline-block;
            font-size: 0;
            vertical-align: middle;
            // padding-bottom: 3px;
            .tab {
              margin-right: 31px;
              line-height: 63px;
              height: 63px;
              vertical-align: middle;
              position: relative;
              display: inline-flex;
              // box-sizing: border-box;

              // display: inline-block;
              align-items: center;
              box-sizing: border-box;
              transition-property: all;
              transition-timing-function: ease;
              transition-duration: 0.2s;
              transition-delay: 0;
              &.active {
                border-bottom: 3px solid #23c9ed;
              }
              .iconfont {
                width: 20px;
                font-size: 20px;
                margin-right: 4px;
                display: inline-block;
              }
              .icon-zhuye {
                color: #00c091;
              }
              .icon-dongtaixuanzhong {
                color: #fb7299;
              }
              .icon-jiajudianshi- {
                color: #02b5da;
              }
              .icon-bxs-videos {
                color: #23c9ed;
              }
              .icon-shoucang {
                color: #f3a034;
              }
              .icon-xihuan {
                color: #ff5d47;
              }
              .icon-setting {
                color: #23c9ed;
              }
              .tab-num {
                font-size: 12px;
                margin-left: 2px;
                color: #99a2aa;
              }
              .tabText {
                font-size: 13px;
              }
            }
          }
          //搜索开始
          .navSearch {
            position: relative;
            display: inline-block;
            width: 134px;
            height: 30px;
            vertical-align: middle;

            .spaceInput {
              position: absolute;
              height: 30px;
              width: 134px;
              line-height: 30px;
              color: #222;
              padding: 0 29px 0 10px;
              border-radius: 15px;
              box-shadow: none;
              border: 1px solid #ccd0d7;
              font-size: 12px;
              box-sizing: border-box;
            }
            .spaceInput:focus {
              outline: none;
              border: 1px solid #23c9ed;
            }
            .icon-sousuo {
              position: absolute;
              right: 8px;
              top: 3px;
              width: 18px;
              height: 30px;
              cursor: pointer;
              font-size: 20px;
            }
          }
          //右边开始
          .navRight {
            width: 290px;
            height: 66px;
            display: flex;
            align-items: center;
            margin-left: 120px;
            justify-content: space-around;
            .navData,
            .navFans,
            .navPraise {
              width: 58px;
              height: 66px;
              padding: 10px 0;
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .data-text {
              font-size: 12px;
              line-height: 14px;
            }
            .fansNum,
            .data-bf,
            .attention {
              line-height: 16px;
              margin-top: 5px;
            }
          }
        }
        // .navCursor {
        //   background-color: #00a1d6;
        //   height: 3px;
        //   // position: absolute;
        //   // bottom: -1px;
        //   transition-property: all;
        //   transition-timing-function: ease;
        //   transition-duration: 0.2s;
        //   transition-delay: 0;
        // }
      }
    }
  }
</style>
